import { useEffect, useState } from 'react'
import api from '../api'

function CreateAndEditArticle () {
    const [title, setTitle] = useState('')
    const [description, setDescription] = useState('')
    const [body, setBody] = useState('')
    const [tagList, setTagList] = useState('')
    let user = sessionStorage.getItem('user') 
    user = user ? JSON.parse(user) : {}

    const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: user.token
        }
      }

        const createArticle = async () => {
            try {
              const res = await api.axios.post(api.url.createArticle, {
                "article": {
                  "title": title,
                  "description": description,
                  "body": body,
                  "tagList": tagList.split(',')
                }
              }, config);
              console.log('createArticle', res)
              let response = res.data
              if(response.code == 0) {
                alert('創建成功')
              } else {
                alert(response.message)
              }
              console.log('createArticle', response);
            } catch (error) {
              console.log(error);
            }
        };
        

    const handleChangeTitle = (e) => {
        setTitle(e.target.value)
    }
    const handleChangeDescription = (e) => {
        setDescription(e.target.value)
    }
    const handleChangeBody = (e) => {
        setBody(e.target.value)
    }
    const handleChangeTagList = (e) => {
        setTagList(e.target.value)
    }
    const publish = () => {
        createArticle();
    }

    return (
        <div className="editor-page">
            <div className="container page">
                <div className="row">
                    <div className="col-md-10 offset-md-1 col-xs-12">
                        <form>
                            <fieldset>
                                <fieldset className="form-group">
                                    <input type="text" value={title} onChange={handleChangeTitle} className="form-control form-control-lg" placeholder="Article Title" />
                                </fieldset>
                                <fieldset className="form-group">
                                    <input type="text" value={description} onChange={handleChangeDescription} className="form-control" placeholder="What's this article about?" />
                                </fieldset>
                                <fieldset className="form-group">
                                {/* defaultValue={""} */}
                                    <textarea value={body} onChange={handleChangeBody} className="form-control" rows={8} placeholder="Write your article (in markdown)"  />
                                </fieldset>
                                <fieldset className="form-group">
                                    <input type="text" value={tagList} onChange={handleChangeTagList} className="form-control" placeholder="Enter tags" />
                                    <div className="tag-list" />
                                </fieldset>
                                <button className="btn btn-lg pull-xs-right btn-primary" type="button" onClick={publish}>
                                    Publish Article
                                </button>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default CreateAndEditArticle;